<template>
  <div>
    <van-nav-bar
  title="城市列表"
  z-index="999"
  fixed
  left-arrow
  @click-left="$router.back()"

/>
 <div class="main">

<van-index-bar :sticky-offset-top="50" :index-list="indexList">

   <van-index-anchor index="#"></van-index-anchor>
    <van-cell :title="$store.state.cityname.label"/>

  <van-index-anchor index="热"></van-index-anchor>
    <van-cell @click="setCurrentCity(obj)" :title="obj.label" v-for="obj in hotcity" :key="obj.value" />

  <div v-for="(item1,index) in indexList.slice(2)" :key="index">
  <van-index-anchor :index="item1" >{{item1}}</van-index-anchor>
  <van-cell @click="tip()" :title="obj.label" v-for="obj in list.filter(item => item.short[0] === item1.toLowerCase())" :key="obj.value"></van-cell>
  </div>

</van-index-bar>
 </div>
  </div>
</template>

<script>
import { hotcity, citys } from '@/api/hotel.js'
import { Toast } from 'vant'
import { setStorage } from '@/utils/storage'
export default {
  data () {
    return {
      list: [],
      hotcity: [],
      newindexList: [],
      indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    }
  },

  created () {
    this.getCitylist()
    this.gethotcity()
  },

  methods: {
    backhome (cityname) {
      localStorage.setItem('cityname', cityname)
      this.$router.push('/layout/home')
    },
    async getCitylist () {
      const res = await citys()
      this.list = res.data.body
      // console.log(this.list.filter(item => item.short[0] === 'b'))
      this.indexList = [...new Set(this.list.map(item => item.short[0].toUpperCase()))].sort()
      this.indexList.unshift('#', '热')
      // this.newindexList.slice()
      // this.newindexList = [...this.indexList]
      // this.newindexList.unshift('#', '热')
    },
    async gethotcity () {
      const res = await hotcity()
      this.hotcity = res.data.body
    },
    tip () {
      Toast('暂无房源')
    },
    setCurrentCity (obj) {
      // removeStorage('hkzf_city')
      setStorage('hkzf_city', obj)
      console.log(obj)
      this.$router.push('/home')
    }
  }
}
</script>

<style scoped lang='less'>
//中间
/deep/.van-index-anchor {
  font-size: 14px;
  color: #ccc;
}
.van-cell {
  padding: 0;
  font-size: 16px;
}
.main {
  padding: 45px 0 0 0;
}

// 头部导航
.van-nav-bar {
   background-color: rgb(33, 185, 122);
   height: 45px;

   /deep/.van-nav-bar__title {
      color: #fff;
   }
   /deep/ .van-icon {
    color: #fff;
}
}
.van-cell__title {
      width: 100%;
      height: 50px;
      padding: 0 15px;
      line-height: 50px;
      border-bottom: 1px solid #eee;
      font-size: 16px;
      color: #333;
      background: #fff;
      cursor: pointer;
    }
</style>
